<template>
  <div class="archived">
    <div class="archived-search">
      <input
        type="text"
        name=""
        id=""
        placeholder="输入关键词搜索..."
        v-model="searchValue"
        @keydown.enter="handleSearch"
      />
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="handleSearch"
      ></el-button>
    </div>
    <div class="archive-list">
      <p>归档</p>
      <select
        name=""
        id=""
        v-model="selectValue"
        @change="handleDatePage(selectValue)"
      >
        <option value="">选择月份</option>
        <option :value="item.path" v-for="item in monthList" :key="item.path">
          {{ item.title }}
        </option>
      </select>
    </div>
    <recommend-list title="最近更新" :cardList="newestList"></recommend-list>
    <recommend-list title="随机文章" :cardList="randomList"></recommend-list>
    <recommend-list title="热门文章" :cardList="hotList"></recommend-list>
    <CommentList></CommentList>
  </div>
</template>

<script>
import RecommendList from "./recommendlist/RecommendList.vue";
import CommentList from "./recommendlist/CommentList.vue";
import { mapMutations } from "vuex";
export default {
  components: { RecommendList, CommentList },
  data() {
    return {
      searchValue: "",
      selectValue: "",
      newestList: [],
      randomList: [],
      hotList: [],
      monthList: [],
    };
  },
  async fetch() {
    //最近更新
    const newestList = await this.$api.getArticle({ path: "/", num: 6 });
    // console.log(newestList.data);
    this.newestList = newestList.data;
    //随机文章
    const randomList = await this.$api.getArticle({
      path: "/",
      num: 6,
      random: true,
    });
    // console.log(randomList);
    this.randomList = randomList.data;
    //热门文章
    const hotList = await this.$api.getArticle({
      path: "/",
      num: 6,
      orderName: "look_num",
    });
    // console.log(hotList);
    this.hotList = hotList.data;
  },
  created() {
    this.changeTime();
    if (this.$route.name == "month" || this.$route.name=='month-page') {
      this.selectValue =
        this.$route.params.year + "/" + this.$route.params.month;
    }
    if (this.$route.name == "search" || this.$route.name == "search-page") {
      this.searchValue = this.$route.params.keyword;
    }
  },
  methods: {
    ...mapMutations(["changePage"]),
    handleDatePage(path) {
      let activePathArr = path.split("/");
      for (let i = 0; i < activePathArr.length; i++) {
        activePathArr[i] = "/" + activePathArr[i];
      }
      // console.log(activePathArr);
      this.$cookies.set("activePathArr", activePathArr);
      this.$cookies.set("activePage", 0);
      this.$router.push("/date/" + path);
    },
    changeTime() {
      let timer = new Date();
      let year = timer.getFullYear();
      let month = timer.getMonth() + 1;
      let monthList = [];
      while (year >= 2014) {
        for (let i = month; i > 0; i--) {
          monthList.push({
            title: year + "年" + i + "月",
            path: year + "/" + i.toString().padStart(2, "0"),
          });
        }
        year--;
        month = 12;
      }
      this.monthList = monthList;
    },
    //搜索
    handleSearch() {
      this.$router.push(`/search/${this.searchValue}`);
    },
  },
};
</script>

<style lang="less" scoped>
@media only screen and (min-width: 1240px) {
  .archived {
    width: 320px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1240px) {
  .archived {
    width: 270px;
  }
}
@media only screen and (max-width: 992px) {
  .archived {
    display: none;
  }
}
.archived {
  border: 10px solid #f5f5f5;
  box-sizing: border-box;
  .archived-search {
    position: relative;
    input {
      width: 100%;
      height: 34px;
      box-sizing: border-box;
      border: 1px solid #fff;
      outline: none;
      padding: 5px 52px 5px 10px;
      font-size: 14px;
      &:focus {
        border: 1px solid #0088cc;
      }
    }
    .el-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 42px;
      height: 34px;
      padding: 0;
      box-sizing: border-box;
      background: #0088cc;
      color: #fff;
      border-radius: 0;
      outline: none;
      border: 1px solid #0088cc;
      &:hover {
        background: #3361ea;
      }
    }
  }
  .archive-list {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    p {
      border-left: 4px solid #0088cc;
      padding-left: 10px;
      margin-bottom: 15px;
    }
    select {
      font-size: 14px;
      padding: 1px 10px 1px 0;
    }
  }
}
</style>